<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择风格</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="__STATIC__/css/base.css">
<link rel="stylesheet" href="__STATIC__/icon/icon.css">
<script type="text/javascript" src="__STATIC__/js/core/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/layer/layer.js"></script>
<style>
h3{
	text-align: center;
	line-height: 30px;
	padding-top: 15px;
	font-size:18px;
}
.ChooseStyleBox{
	margin: 20px;
	border-top:#DDD solid 1px;
	padding-top: 10px;
}



.chooseType{
	line-height: 35px;
}
.chooseType li{
	display: inline-block;
	padding: 10px;
}
.chooseType li a{
	display: block;
	background: #EDEDED;
	padding: 0 20px;
	color: #666;
}
.chooseType li a.ck{
	background: #3BA5FF;
	color: #FFF;
}
.chooseType li a:hover{
	background: #F60;
	color: #FFF;
}	
.chooseTpl:after{
	content:'';
	display: block;
	clear: both;
}
.chooseTpl li{
	float: left;
	width:33.33%;
	overflow: hidden;
}
.chooseTpl li textarea{
	display: none;
}
.chooseTpl li dl{
	margin: 10px;
	background: #EDEDED;
	border-radius: 5px;
	padding-bottom: 10px;
}

@media (max-width: 500px) {
	.ChooseStyleBox{
		margin: 0px;
	}
	.chooseTpl li dl{
		margin: 3px;
	}
}

.chooseTpl li dl:hover{
	box-shadow: 3px 3px 3px #999;
}
.chooseTpl li dl dt{
	position: relative;
	overflow: hidden;
}
.chooseTpl li dl dt:before{
	content: '';
	display: block;
	padding-top: 80%;
}
.chooseTpl li dl dt img{
	position:absolute;
	max-width:90%;
	max-height: 90%;
	left:50%;
	top: 50%;
  -webkit-transform: translate3D(-50%, -50%, 0);
      -ms-transform: translate3D(-50%, -50%, 0);
          transform: translate3D(-50%, -50%, 0);
}
.chooseTpl li dl dd div{
	text-align: center;
	height: 30px;
	line-height: 30px;
	overflow: hidden;
	padding: 0 15px;
	color: #666;
}
</style>
</head>
<body>
<h3>点击选择风格</h3>
{php}
$types||$types='title';
$cktypes[$types]=" class='ck'";
{/php}
<div class="ChooseStyleBox">
	<!--
	<ul class="chooseType">
		<li><a href="?types=title"{$cktypes.title}>标题风格</a></li>
		<li><a href="?types=pic"{$cktypes.pic}>图片风格</a></li>
		<li><a href="?types=slide"{$cktypes.slide}>幻灯片风格</a></li>
	</ul>
	-->
	<ul class="chooseTpl">
		{volist name="listdb" id="vo"}
		<li>
			<dl>
				<dt><img onerror="this.src='__STATIC__/images/nopic.png'" src="{$vo.picurl}"></dt>
				<dd>
					<div>{$vo.title}</div>
					<textarea>{:str_replace(['<','>'],['&lt;','&gt'],$vo['code']);}</textarea>
				</dd>
			</dl>
		</li>
		{/volist}
	</ul>
</div>
<script type="text/javascript">
$(".chooseTpl li").click(function(){
	var code = $(this).find('textarea').val();
	$(window.parent.document).find("#atc_view_tpl").val(code)
	$(window.parent.document).find("#view_tpl").val(code)
  	var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
  	parent.layer.close(index);
});
</script>
</body>
</html>